<template>
  <div class="order-info">
    <x-header>订单信息<a v-if="orderInfo.UserId!==UserId" @click="privateChat" slot="right">私聊</a></x-header>
    <box gap="10px 10px">
      <div class="order-inf-card">
        <div class="title">
          <div class="title-content">
            {{orderInfo.Brief}}
          </div>
          <div class="title-footer">
            <div>{{orderInfo.State|orderStatus}}</div>
            <!-- <div>{{+orderInfo.balance>0 ? `￥${orderInfo.balance}元`:`未出价`}}</div> -->
            <div>{{orderInfo.DateCreated|YYYYMMDDHHmmss}}</div>
          </div>
        </div>
        <divider>用户信息</divider>
        <div class="user-info">
          <div class="user-info-row">
            <div>编号:{{orderInfo.UserCode}}</div>
          </div>
          <div class="user-info-row">
            <div>QQ:{{orderInfo.QQ}}</div>
          </div>
          <div class="user-info-row">
            <div>电话:{{orderInfo.Mobile1}}</div>
          </div>
          <div class="user-info-row">
            <div>公司:{{orderInfo.CompanyName}}</div>
          </div>
          <div class="user-info-row">
            <div>地址:{{orderInfo.Address}}</div>
          </div>
        </div>
        <divider v-if="orderInfo.State === '1'">我的司机</divider>
        <div class="choose-driver" v-if="orderInfo.State === '1'">
          <group>
            <selector title="我的司机" v-model="mydriver" :options="orderDriver"></selector>
          </group>
        </div>
        <!--<divider>私聊</divider>-->
        <!--<div class="private-chat">-->
          <!--<x-textarea placeholder="聊天内容..." :show-counter="false" :rows="2" autosize></x-textarea>-->
        <!--</div>-->
        <!-- <divider>出价</divider>
        <div class="price">
          <group title="余额: 200 ￥">
            <x-input v-model="$store.state.order.orderInfo.UserMoney" title="￥" :show-clear="false" placeholder="请输入您的出价">
              <div slot="right">元</div>
            </x-input>
          </group>
        </div> -->
        <box gap="30px 0 10px 0">
          <x-button v-if="orderInfo.State === '1' && !flag" @click.native="apply" type="primary">申请接单</x-button>
          <x-button v-if="myst === 2 && type === 0" @click.native="payMoney(6)" type="primary">支付</x-button>
          <x-button v-if="myst === 6 && type === 1" @click.native="payMoney(4)" type="primary">确认支付</x-button>
          <x-button v-if="myst === 1 && type === 0" @click.native="openCompleted(orderInfo.MessageId)" type="default">设置为成交</x-button>
          <x-button v-if="orderInfo.State === '1' && type === 0" @click.native="delOrderInfo" type="warn">删除</x-button>
          <x-button v-if="orderInfo.State === '1' && type === 1" @click.native="delFollows" type="warn">删除</x-button>
        </box>
      </div>
    </box>
  </div>
</template>

<script>
import {
  XHeader,
  Box,
  Divider,
  XInput,
  Cell,
  XButton,
  Selector,
  XDialog,
  PopupPicker,
  XTextarea,
  Group
} from 'vux'
import { mapState, mapMutations, mapActions } from 'vuex'
import {
  applyOrder,
  delOrderInfo,
  delFollows,
  updateOrderState,
  buildFri,
  insertChat
} from '../../api/api'
import moment from 'moment'
export default {
  name: 'orderInfo',
  components: {
    XHeader,
    Box,
    Divider,
    XInput,
    Cell,
    XButton,
    XDialog,
    Selector,
    PopupPicker,
    XTextarea,
    Group
  },
  data () {
    return {
      privateMessage: '',
      mydriver: '',
      flag: false,
      myst: 1,
      type: '',
      followid: ''
    }
  },
  computed: {
    ...mapState({
      orderInfo: state => state.order.orderInfo,
      orderDriver: state => state.order.orderDriver,
      PlateNumber: state => state.user.PlateNumber,
      UserId: state => state.user.UserId
    })
  },
  watch: {
    orderInfo (value) {
      this.testVerify(value.UserId)
    }
  },
  mounted () {
    this.userDriver()
    this.type = this.$router.currentRoute.query.orderType
    this.myst = this.$router.currentRoute.query.orderMst
    this.followid = this.$router.currentRoute.query.followId
    if (this.$router.currentRoute.query.hasOwnProperty('orderId')) {
      let orderId = this.$router.currentRoute.query.orderId
      this.getOrderInfo(orderId)
    }
    console.log(this.$router.currentRoute.query.fendId)
  },
  destroyed () {
    // this.resetOrderInfo()
    this.resetDriver()
  },
  methods: {
    apply () {
      const orderInfo = this.orderInfo
      if (this.orderDriver.lengthr === 0) {
        this.$vux.toast.text('没有车牌不能接单')
        return false
      }
      if (this.mydriver === '') {
        this.$vux.toast.text('请选择车牌')
        return false
      }
      if (this.UserId === orderInfo.UserId) {
        this.$vux.toast.text('不能接自己的单')
        return false
      }
      applyOrder({
        Memo: '',
        MessageId: this.orderInfo.MessageId,
        PlateNumber: this.mydriver,
        State: '1',
        UserMoney: 0
      }).then(res => {
        if (res.status === 200) {
          this.$vux.toast.text('接单成功')
          this.$router.push({
            path: '/main/home'
          })
          this.insertChat()
          this.buildFri()
        } else {
          this.$vux.toast.text(res.msg)
        }
      })
    },
    insertChat () {
      insertChat({
        chatContent: `申请接单：【${this.orderInfo.Brief}】`,
        receiverId: this.orderInfo.UserId,
        senderId: this.UserId,
        messageId: this.orderInfo.MessageId,
        createTime: moment().valueOf()
      }).then(res => {
        if (res.status === 200) {
        } else {
          this.$vux.toast.text(res.msg)
        }
      })
    },
    // 设置为成交
    openCompleted (msgid) {
      this.$router.push({
        path: '/main/SetCompleted',
        query: {
          msgid: msgid
        }
      })
    },
    testVerify (uid) {
      if (uid === this.UserId) {
        this.flag = true
      }
    },
    delOrderInfo () {
      delOrderInfo({
        msgid: this.orderInfo.MessageId
      }).then(res => {
        if (res.status === 200) {
          this.$vux.toast.text(res.msg)
          this.$router.push({
            path: '/main/order'
          })
        } else {
          this.$vux.toast.text(res.msg)
        }
      })
    },
    delFollows () {
      delFollows({
        msgid: this.orderInfo.MessageId
      }).then(res => {
        if (res.status === 200) {
          this.$vux.toast.text(res.msg)
          this.$router.push({
            path: '/main/order'
          })
        } else {
          this.$vux.toast.text(res.msg)
        }
      })
    },
    payMoney (st) {
      let myarr = []
      myarr.push(this.followid)
      updateOrderState({
        MessageId: this.orderInfo.MessageId,
        State: st,
        FollowId: myarr
      }).then(res => {
        if (res.status === 200) {
          this.$vux.toast.text(res.msg)
          this.$router.push({
            path: '/main/order'
          })
        } else {
          this.$vux.toast.text(res.msg)
        }
      })
    },
    userDriver () {
      let len = this.orderDriver.length
      if (len === 0) {
        let str = this.PlateNumber
        this.orderDriver.push(str)
      }
    },
    privateChat () {
      const contacts = this.$store.state.chat.contacts
      const orderInfo = this.orderInfo
      this.$router.push({
        path: '/main/chat'
      })
      const find = contacts.findIndex(item => {
        return item.senderId === orderInfo.UserId
      })
      if (find > -1) {
        this.$store.state.chat.contact = contacts[find]
      } else {
        this.$store.state.chat.contact = {
          senderId: orderInfo.UserId,
          UserCode: orderInfo.UserCode
        }
        this.buildFri()
      }
    },
    buildFri () {
      buildFri({
        friUserId: this.orderInfo.UserId
      }).then(res => {
        if (res.status === 200) {
        } else {
          this.$vux.toast.text(res.msg)
        }
      })
    },
    ...mapMutations({
      resetOrderInfo: 'order/resetOrderInfo',
      resetDriver: 'order/resetDriver'
    }),
    ...mapActions({
      getOrderInfo: 'order/getOrderInfo'
    })
  }
}
</script>

<style lang="less">
.order-info{
  .order-inf-card{
    border: 1px solid #ddd;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
    border-radius: 4px;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    .title{
      .title-content{
        min-height: 50px;
      }
      .title-footer{
        margin-top: 15px;
        font-size: 13px;
        color: grey;
        display: flex;
        justify-content: space-between;
      }
    }
    .user-info{
      .user-info-row{
        display: flex;
        justify-content: space-between;
      }
    }
    .private-chat{
      .weui-cell{
        padding: 0;
      }
    }
    .price{
      .weui-cell{
        padding: 10px 0;
      }
      .weui-cells__title{
        margin-top: 0;
      }
    }
  }
}
</style>
